<!-- 焚烧炉 -->
<template>
  <div class="destructor">
    <!-- 实时监控 -->
    <realTime></realTime>
    <!-- 烟气系统 -->
    <smoke></smoke>
    <!-- 烟气系统 -->
    <equipmentList></equipmentList>
    <!-- 摄像头 -->
    <div class="camera">
      <el-checkbox v-model="checked" label="摄像头" size="large" />
    </div>
    <!-- 选择设备1炉,2炉 -->
    <!-- <div class="furnace" v-show="routerName == '焚烧炉总貌' || routerName == '锅炉燃烧系统'">
      <div class="furnace_item" :class="{ furnace_item_active: activeFurnace == 1 }"  @click="SetBoxClip(1)">#1炉</div>
      <div class="furnace_item" :class="{ furnace_item_active: activeFurnace == 2 }"  @click="SetBoxClip2(2)">#2炉</div>
    </div> -->
    <!-- 焚烧炉设备信息弹窗 -->
    <!-- <equipmentInfo class="fade-in" v-if="routerName == '焚烧炉总貌'" :top="pxToVh(600)" :left="pxToVh(1500)"></equipmentInfo> -->
    <equipmentInfo class="fade-in" v-if="routerName == '貌'" :top="pxToVh(600)" :left="pxToVh(1500)"></equipmentInfo>
    <!-- 炉点火系统弹框 -->
    <!-- <div v-if="routerName == '锅炉燃烧系统'"> -->
    <div v-if="routerName == '统'">
      <furnaceIgnitionPopup :top="pxToVh(123)" :left="pxToVh(694)" :data="data.dataList1"></furnaceIgnitionPopup>
      <furnaceIgnitionPopup :top="pxToVh(733)" :left="pxToVh(694)" :data="data.dataList2"></furnaceIgnitionPopup>
      <furnaceIgnitionPopup :top="pxToVh(733)" :left="pxToVh(1432)" :data="data.dataList2"></furnaceIgnitionPopup>
      <furnaceIgnitionPopup :top="pxToVh(221)" :left="pxToVh(1442)" :data="data.dataList3"></furnaceIgnitionPopup>
    </div>
    <!-- 炉汽水系统弹框 -->
    <!-- <div v-if="routerName == '锅炉启动燃烧器系统'"> -->
    <div v-if="routerName == '统'">
      <furnaceSteam :top="pxToVh(123)" :left="pxToVh(494)" :data="data.dataListSteam"></furnaceSteam>
      <furnaceSteam :top="pxToVh(531)" :left="pxToVh(924)" :data="data.dataListSteam"></furnaceSteam>
    </div>
    <!-- 炉吹灰系统弹框 -->
    <div v-if="routerName == '乙玦吹灰系统'">
      <!-- <FurnaceSootblowing :top="pxToVh(123)" :left="pxToVh(494)" :data="data.dataListBlow"></FurnaceSootblowing> -->
      <FurnaceSootblowing2 :top="pxToVh(123)" :left="pxToVh(494)"></FurnaceSootblowing2>
    </div>
    <!-- 炉排渣系统弹框 -->
    <div v-if="false">
      <FurnaceSlag :top="pxToVh(704)" :left="pxToVh(306)"></FurnaceSlag>
      <FurnaceSlag2 :top="pxToVh(165)" :left="pxToVh(306)"></FurnaceSlag2>
    </div>
    <!-- <engine :modelInfo="modelInfo"></engine> -->
  </div>
</template>

<script setup lang="ts">
import realTime from "./components/realTime.vue";
import smoke from "./components/smoke.vue";
import equipmentList from "./components/equipmentList.vue";
import equipmentInfo from "./components/equipmentInfo.vue";
import furnaceIgnitionPopup from "./components/furnaceIgnitionPopup.vue";
import furnaceSteam from "./components/furnaceSteam.vue";
import FurnaceSootblowing from "./components/FurnaceSootblowing.vue";
import FurnaceSootblowing2 from "./components/FurnaceSootblowing2.vue";
import FurnaceSlag from "./components/FurnaceSlag.vue";
import FurnaceSlag2 from "./components/FurnaceSlag2.vue";
import engine from '@/components/engine.vue'
import { destructor1, destructor2 } from '@/utils/destructor1'
import { useMain } from "@/store/index";
import { storeToRefs } from 'pinia';

const useMainStore = useMain();//pinia

//storeToRefs 保持响应式 judgmentName 
let { routerName } = storeToRefs(useMainStore);

let modelInfo = [
  // {
  //   dataSetId: '3a14f25a6aabe0e2fafd9bbd1fea26ac',
  //   // resourcesAddress: 'https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a1480cfe471435b110154a86707fb2c'
  //   // resourcesAddress: 'https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a14f24c3469a082af165edffde64c55'
  //   "resourcesAddress": "https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a14f25a6aabe0e2fafd9bbd1fea26ac"
  // }
  {
    "dataSetId": "3a14f25a6aabe0e2fafd9bbd1fea26ac",
    "resourcesAddress": "https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a14f24c3469a082af165edffde64c55"
  },
  // {
  //   "dataSetId": "3a14f24291f025dfeab59706b1d346b8",
  //   "resourcesAddress": "https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a14f24291f025dfeab59706b1d346b8"
  // }, 
  // {
  //   "dataSetId": "3a14f25a6aabe0e2fafd9bbd1fea26ac1",
  //   "resourcesAddress": "https://engine3.bjblackhole.com/engineweb/api/autoconvert/EngineRes/RequestEngineRes?dir=url_res05&path=3a14f24c3469a082af165edffde64c55"
  // }
]


const pxToVh = (px: number) => {
  return (px / 1080) * 100 + 'vh';
}
let checked = ref(false);
let data = reactive({
  dataList1: { //炉点火
    dataList: [
      { name: '点火装备', state: true },
      { name: '气阀组开启故障', state: false },
      { name: '气阀组泄漏', state: true },
      { name: '就地柜急停', state: true },
      { name: '负荷手动', state: true },
      { name: '动力柜故障', state: true },
      { name: '负荷自动', state: false },
    ] as any,
    dataName: '#1炉1#辅助燃烧器'
  },
  dataList2: { //炉点火
    dataList: [
      { name: '点火装备', state: true },
      { name: '就地急停', state: false },
      { name: '风压低', state: true },
    ] as any,
    dataName: '#1炉1#点火燃烧器'
  },
  dataList3: { //炉点火
    dataList: [
      { name: '点火装备', state: true },
      { name: '气阀组开启故障', state: false },
      { name: '气阀组泄漏', state: true },
      { name: '就地柜急停', state: true },
      { name: '负荷手动', state: false },
      { name: '动力柜故障', state: true },
      { name: '负荷自动', state: true },
    ] as any,
    dataName: '#1炉1#辅助燃烧器'
  },
  dataListSteam: [ //炉汽水
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
    { name: '二级过热器2壁温1', temperature: '357.5℃' },
  ],
  dataListBlow: { //炉吹灰
    dataList: [
      { name: 'DCS远控', state: true },
      { name: '疏水温度到', state: false },
      { name: '程控运行', state: false },
      { name: '吹灰器过载', state: false },
    ] as any,
    dataName: '吹灰程控'
  } as any,
})

console.log(destructor1);
let activeFurnace = ref(0)
//进入剖切
const SetBoxClip = (index: any) => {
  activeFurnace.value = index
  let elemIdList = destructor1
  window.BlackHole3D.BIM.setElemsValidState("", [], false);
  window.BlackHole3D.BIM.setElemsValidState("3a153a0ce5994d7f5adf684c14c5c75f", elemIdList, true);
  // //使用选择集进行操作
  // var list = window.BlackHole3D.BIM.getSelElemIDs();
  // window.BlackHole3D.Clip.setBoxClip(list);
}
//进入剖切
const SetBoxClip2 = (index: any) => {
  activeFurnace.value = index
  let elemIdList = destructor2
  window.BlackHole3D.BIM.setElemsValidState("", [], false);
  window.BlackHole3D.BIM.setElemsValidState("3a153a0ce5994d7f5adf684c14c5c75f", elemIdList, true);

  // var SetBoxClipData = window.BlackHole3D.Clip.getSurplusID(false);
  // console.log(SetBoxClipData);
}
//获取剖切剩余的ID，包含交叉

</script>

<style lang="scss" scoped>
.destructor {
  .camera {
    position: absolute;
    left: vh(43);
    bottom: vh(103);
    z-index: 999;

    .el-checkbox {
      :deep(.el-checkbox__inner) {
        background: rgba(0, 192, 255, 0.2);
        border: 1px solid #00DEFA;
        width: vh(16);
        height: vh(16);

        &::after {
          left: vh(5);
          width: vh(4);
          height: vh(9);
        }
      }

      :deep(.el-checkbox__label) {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(14);
        color: #FFFFFF;
      }
    }
  }

  .furnace {
    position: absolute;
    top: vh(107);
    right: vh(502);
    z-index: 999;
    display: flex;

    .furnace_item {
      width: vh(68);
      height: vh(28);
      line-height: vh(28);
      background: rgba(0, 192, 255, 0.2);
      border-radius: vh(4);
      text-align: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: vh(14);
      color: #FFFFFF;
      cursor: pointer;

      &:first-child {
        margin-right: vh(14);
      }

      &.furnace_item_active {
        border: 1px solid #00DEFA;
      }
    }
  }
  
  .fade-in {
    animation: fadeIn 1s ease-in-out forwards; /* 使用动画 */
  }

}
</style>
